<template>
  <view class="hbxw-slider-wrap" @touchmove.prevent="() => {}">
    <slider 
      :value="valueIn"
      :min="min" 
      :max="max"
      :step="step"
      :disabled="disabled"
      @changing="sliderChanging" 
      @change="sliderChange"
      style="opacity: 0;"
    />
    <view class="hbxw-slider-main">
      <view class="hbxw-slider-point-warp">
        <!-- <view class="hbxw-slider-point" v-for="item in (steps + 1)" :key="item"></view> -->
		<view class="hbxw-slider-point" style="display: flex;align-items: center;height: 43rpx;justify-content: space-between;">
		   <view class="" v-for="(item,index) in 50" :key="index">
				<image v-if="index <= (valueIn/max * 50)" src="/static/index/9.jpg" style="width: 6rpx;height: 43rpx;" mode="scaleToFill"></image>
				<image v-else src="/static/index/11.png" style="width: 6rpx;height: 43rpx;" mode="scaleToFill"></image>	
		   </view>
		</view>
      </view>
      
      <view class="hbxw-slider-item" id="hbxwSliderItem" :style="{'margin-left': `calc(${ml} + 4rpx)`, width: sizeW+'px', transform: `translate(-${sizeW / 2}px, -50%)`}">
        <slot name="handle">
          <!-- <image class="hbxw-slider-img" src="../../static/touying.png" mode="aspectFill" /> -->
        </slot>
      </view>
      <view class="hbxw-slider-item" :style="{'margin-left': `calc(${ml} + 4rpx)`, width: sizeW+'px', transform: `translate(-${sizeW / 2}px, -50%)`}">
        <slot name="tag" :value="valueIn">
          <text class="hbxw-slider-text">{{valueIn}}</text>
        </slot>
      </view>
    </view>
  </view>
</template>
<script>
  import { selector } from '@/uni_modules/hbxw-utils/js_sdk/hbxw-utils';
  
  export default {
    model: {
      prop: 'value',
      event: 'update'
    },
    props: {
      value: {
        type: Number,
        default: 0
      },
      min: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 10
      },
      disabled: {
        type: Boolean,
        default: false
      },
      step: {
        type: Number,
        default: 1
      },
      showValue: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        valueIn: 0,
        sizeW: 'auto',
		timer:null,
      }
    },
    watch: {
      value: {
        handler(newVal,_) {
          if (newVal !== undefined) {
            this.valueIn = newVal;
          }
        },
        immediate: true
      }
    },
    computed: {
      steps() {
        return Math.floor((this.max - this.min) / this.step);
      },
      ml() {
        return 1 / this.steps * (this.valueIn - this.min) * 100 + '%'
      }
    },
    mounted() {
      this.valueIn = this.value;
      this.init();
    },
    methods: {
      init() {
        selector('#hbxwSliderItem', this).then((res) => {
		 if (res) {
		   this.sizeW = res.width;
		 }
        })
      },
      sliderChange(e) {
			this.valueIn = e.detail.value;
			this.$emit('changing', e.detail.value);
      },
      sliderChanging(e) {
		  clearTimeout(this.timer); // 清除之前的定时器
		  this.timer = setTimeout(() => {
		  	this.valueIn = e.detail.value;
		  	this.$emit('changing', e.detail.value);
		  }, 300); 
      }
    }
  }
</script>
<style scoped lang="scss">
  .hbxw-slider-wrap{
    position: relative;
	z-index: 1000;
  }
  .hbxw-slider-main{
    position: absolute;
    bottom: 0;
    top:0;
    left:18px;
    right:18px;
    pointer-events: none;
  }
  // .hbxw-slider-point-warp{
  //   width: 100%;
  //   height: 100%;
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: space-between;
  //   align-items: center;
  // }
  .hbxw-slider-point{
    // width: 8rpx;
    // height: 8rpx;
    // border-radius: 50%;
    // background-color: #D9EFDE;
  }
  // .hbxw-slider-point:nth-of-type(1),.hbxw-slider-point:nth-last-of-type(1) {
  //   width: 9rpx;
  //   height: 9rpx;
  //   border: 3rpx solid #4D955D;
  //   background: linear-gradient(0deg, #E9FFCC, #FFFFFF);
  // }
  .hbxw-slider-point:nth-last-of-type(1) {
    // width: 9rpx;
    // height: 9rpx;
    // border: 3rpx solid #4D955D;
    // background: linear-gradient(0deg, #E9FFCC, #FFFFFF);
  }
  .hbxw-slider-item{
    // width: 147rpx;
    // height: 106rpx;
    position: absolute;
    left: 0;
    top: 50%;
    // transform:translate(-74rpx, -50%);
    transition: margin .3s;
  }
  .hbxw-slider-img{
    width: 147rpx!important;
    height: 106rpx!important;
  }
  .hbxw-slider-text{
    // width: 100%;
    // height: 100%;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // font-size: 24rpx;
    // position: relative;
    // z-index: 2;
    // margin-top: -10rpx;
    // color: #326500;
  }
</style>
